<template>
  <div class="app">
    <div>
      <itemBox title="全市本月餐费使用情况">
        <div class="top">
          <div class="zhuangshi"></div>
          <div class="leftArrow"></div>
          <div class="rightArrow"></div>
          <div class="xuxian"></div>
          <div class="zhuangshi2"></div>
          <chart class="chartBox" :option="option" style="width: 100%"></chart>
        </div>
      </itemBox>
    </div>
    <div style="margin-top: 24px">
      <itemBox title="学校本月餐费占比排名" class="mt24">
        <table-scroll-pro
          :data="tableDataA"
          :columns="columnsA"
          :class-option="classOption"
          :table-config="tableConfig"
          :config="tableConfig"
        >
          <template slot="icon" slot-scope="{ scope, row, data }">
            <div
              style="position: absolute; top: -24px; left: 33px; width: 200px"
            >
              {{ data }}
            </div>
          </template>
        </table-scroll-pro>
        <!-- <div class="tableHead">
          <div
            v-for="(item, index) in tableHeadList"
            :key="item.id"
            style="height: 42px"
          >
            {{ item.name }}
          </div>
        </div>
        <scroll style="height: 300px">
          <div class="tableContent" v-for="item in tableContentList">
            <div style="display: flex">
              <div style="margin: 5px">{{ item.rank }}</div>
              <div style="margin: 5px">{{ item.school }}</div>
            </div>
            <div style="display: flex">
              <template v-for="(val, key) in item">
                <div
                  v-if="key !== 'rank' && key !== 'school'"
                  :key="val.rank"
                  class="ttt"
                  :class="{ blueText: key === 'foodPercent' }"
                >
                  {{ val }}
                </div>
              </template>
            </div>
          </div>
        </scroll> -->
      </itemBox>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import countTo from "vue-count-to";
import pageTitle from "../../components/pageTitle";
import itemBox from "../../components/itemBox";
import subTit from "../../components/subTit";
import chart from "@/components/eChart";
import scroll from "@/views/food/components/tableScroll/index.vue";
import _ from "lodash";
import filters from "@/utils/filters";
let mixin = new drawMixin();

export default {
  name: "index",
  components: { countTo, pageTitle, itemBox, subTit, chart, scroll },
  mixins: [mixin],
  data() {
    return {
      tableHeadList: [
        {
          name: "学生数（人）",
          id: 1,
        },
        {
          name: "餐费（元）",
          id: 2,
        },
        {
          name: "食材采购费（元）",
          id: 3,
        },
        {
          name: "人工费 (元)",
          id: 4,
        },
        {
          name: "其他（元）",
          id: 5,
        },
        {
          name: "食材占餐费比",
          id: 6,
        },
      ],
      tableContentList: [
        {
          rank: "No1",
          school: "xxxx学校",
          peopleNum: "100",
          money: "300",
          food: "100",
          man: "100",
          other: "100",
          foodPercent: "50.2%",
        },
        {
          rank: "No2",
          school: "xxxx学校",
          peopleNum: "100",
          money: "300",
          food: "100",
          man: "100",
          other: "100",
          foodPercent: "43.3%",
        },
        {
          rank: "No3",
          school: "xxxx学校",
          peopleNum: "100",
          money: "300",
          food: "100",
          man: "100",
          other: "100",
          foodPercent: "30.1%",
        },
        {
          rank: "No4",
          school: "xxxx学校",
          peopleNum: "100",
          money: "300",
          food: "100",
          man: "100",
          other: "100",
          foodPercent: "28.2%",
        },
        {
          rank: "No5",
          school: "xxxx学校",
          peopleNum: "100",
          money: "300",
          food: "100",
          man: "100",
          other: "100",
          foodPercent: "25.5%",
        },
        {
          rank: "No6",
          school: "xxxx学校",
          peopleNum: "100",
          money: "300",
          food: "100",
          man: "100",
          other: "100",
          foodPercent: "25.5%",
        },
        {
          rank: "No7",
          school: "xxxx学校",
          peopleNum: "100",
          money: "300",
          food: "100",
          man: "100",
          other: "100",
          foodPercent: "25.5%",
        },
        {
          rank: "No8",
          school: "xxxx学校",
          peopleNum: "100",
          money: "300",
          food: "100",
          man: "100",
          other: "100",
          foodPercent: "25.5%",
        },
        {
          rank: "No9",
          school: "xxxx学校",
          peopleNum: "100",
          money: "300",
          food: "100",
          man: "100",
          other: "100",
          foodPercent: "25.5%",
        },
        {
          rank: "No10",
          school: "xxxx学校",
          peopleNum: "100",
          money: "300",
          food: "100",
          man: "100",
          other: "100",
          foodPercent: "25.5%",
        },
      ],
      columnsA: [
        {
          label: "",
          slot: "icon",
          align: "",
          width: 1,
        },
        {
          label: "学生数（人）",
          prop: "studentNum",
          align: "center",
          width: 72,
        },
        { label: "餐费（元）", prop: "money", width: 72, align: "center" },
        {
          label: "食材采购费（元）",
          prop: "foodMoney",
          width: 72,
          align: "center",
        },
        {
          label: "人工费（元）",
          prop: "peopleMoney",
          width: 72,
          align: "center",
        },
        { label: "其他（元）", prop: "other", width: 72, align: "center" },
        {
          label: "食材占餐费比",
          prop: "proportion",
          width: 72,
          align: "center",
        },
      ],
      tableDataA: [
        {
          icon: "  No.01 吴宁五校",
          studentNum: "1928",
          money: "53.98万",
          foodMoney: "35.86万",
          peopleMoney: "12.53万",
          other: "0",
          proportion: "66%",
        },
        {
          icon: "  No.02 东阳市第二实验小学",
          studentNum: "2967",
          money: "89.01万",
          foodMoney: "55.19万",
          peopleMoney: "19.29万",
          other: "0",
          proportion: "62%",
        },
        {
          icon: "  No.03 画溪初中",
          studentNum: "508",
          money: "15.75万",
          foodMoney: "9.45万",
          peopleMoney: "3.30万",
          other: "0",
          proportion: "60%",
        },
        {
          icon: "  04 横店中心小学",
          studentNum: "1284",
          money: "41.09万",
          foodMoney: "23.88万",
          peopleMoney: "8.35万",
          other: "0",
          proportion: "58%",
        },
        {
          icon: `05 江北初中`,
          studentNum: "2983",
          money: "104.41万",
          foodMoney: "55.48万",
          peopleMoney: "19.39万",
          other: "0",
          proportion: "53%",
        },
      ],
      classOption: {
        limitMoveNum: 4,
        singleHeight: 75, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
        waitTime: 2000, // 单步停止等待时间(默认值1000ms)
      },
      tableConfig: {
        headerHeight: "74px",
        rowHeight: "74px",
      },
      option: {},
    };
  },
  mounted() {
    let data = [
      { value: 1249.33, name: "原材料价格", color: "#61a5e8" },
      { value: 1608.78, name: "人工价格", color: "#7ecf51" },
      { value: 438.36, name: "食材价格", color: "#eecb5f" },
      { value: 109.59, name: "工具价格", color: "#e3935d" },
      { value: 246.94, name: "其他价格", color: "#e16757" },
    ];
    this.option = this.getOption(data);
  },
  methods: {
    getOption(data) {
      let total = _.sumBy(data, "value");
      return {
        legend: {
          // type: 'scroll',
          orient: "vertical", // 图例列表的布局朝向
          top: "bottom",
          right: "center",
          width: "70%",
          // height: '100%',
          itemGap: 4, // 图例每项之间的间隔。
          // icon: 'circle',
          formatter: function (name) {
            let target;
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = Number(data[i].value);
              }
            }
            let d;
            if (total === 0 || target === 0) {
              d = 0;
            } else {
              d = ((target / total) * 100).toFixed(2);
            }
            let arr = [
              "{a|  " + name + ": }",
              "{b|      " + target + "}",
              "{d| 万元}",
              "{c| " + d + "%}",
            ];
            return arr.join("");
          },
          itemWidth: 4,
          itemHeight: 16,
          padding: [0, 20],
          textStyle: {
            color: "#fff",
            rich: {
              a: {
                fontSize: 16,
                fontFamily: "PingFangSC",
                color: "rgba(255,255,255,0.85)",
                padding: [0, 0, 0, 0],
                width: 85,
              },
              b: {
                fontSize: 18,
                fontFamily: "DINPro",
                padding: [0, 10, 0, 0],
              },
              d: {
                fontSize: 16,
                fontFamily: "PingFangSC",
              },
              c: {
                fontSize: 20,
                fontFamily: "DINPro",
                color: "#01FFFF",
                padding: [0, 0, 0, 20],
              },
            },
          },
        },
        series: {
          type: "pie",
          radius: ["43%", "55%"], // 圆环内外径
          center: ["50%", "35%"], // ['24%', '50%']
          // roseType: 'area',
          // data: data,
          data: data.map((item) => ({
            value: item.value,
            name: item.name,
            itemStyle: {
              color: item.color, // 设置圆环的颜色
            },
          })),
          label: {
            show: true,
            position: "center",
            formatter: `{a|${filters.numFormat(total)}}\n{b|总费用/万元}`,
            rich: {
              a: {
                color: "#01FFFF",
                fontSize: 20,
                fontFamily: "DingTalk",
                lineHeight: 24,
              },
              b: {
                color: "#fff",
                fontSize: 18,
                fontFamily: "DingTalk",
                lineHeight: 22,
              },
            },
          },
          labelLine: {
            show: false,
          },
          animationDuration: 2800,
          animationEasing: "cubicInOut",
        },
      };
    },
  },
};
</script>

<style scoped lang="scss">
.app {
  width: 100%;
  height: 100%;

  ::v-deep .cell {
    font-size: 16px;
  }
  .tableHead {
    height: 74px;
    display: flex;
    text-align: center;
    background-color: #022459;
    padding: 14px;
  }
  .tableContent {
    height: 74px;
    margin: 6px 0;
    padding: 9px 15px;
    background-color: rgba(3, 31, 73, 0.5);
    .ttt {
      width: 73px;
      height: 34px;
      text-align: center;
    }
  }
  .tableContent:nth-child(2n) {
    background-color: #042043; /* 设置第二个 .tableContent 的背景色为白色 */
  }

  .blueText {
    color: #01d0d1;
  }
}
.top {
  position: relative;
  width: 100%;
  height: 100%;
  .zhuangshi {
    width: 100%;
    height: 6px;
    position: absolute;
    top: 0px;
    background-image: url("~@/assets/food/zhuangshi1.png");
    background-size: contain;
  }
  .leftArrow {
    position: absolute;
    top: 88px;
    left: 0;
    width: 100px;
    height: 92px;
    background-image: url("~@/assets/food/left.png");
    background-size: cover;
  }
  .rightArrow {
    position: absolute;
    top: 88px;
    right: 0;
    width: 100px;
    height: 92px;
    background-image: url("~@/assets/food/right.png");
    background-size: cover;
  }
  .xuxian {
    position: absolute;
    top: 16px;
    left: 100px;
    width: 236px;
    height: 236px;
    border: 4px dashed rgba(187, 237, 255, 0.72);
    border-radius: 50%;
    border-width: 2px;
    border-style: dashed dotted;
  }
  .zhuangshi2 {
    width: 100%;
    height: 1px;
    position: absolute;
    top: 253px;
    background-image: url("~@/assets/food/zhuangshi2.png");
    background-size: contain;
  }
  .chartBox {
    height: 204px;
    margin-top: 6px;
    position: relative;

    &:after {
      content: "";
      display: flex;
      width: 139px;
      height: 139px;
      border-radius: 50%;
      position: absolute;
      top: 134px;
      margin-top: -70px; /*transform: translateY(-50%);*/
      left: 150px;
      background: conic-gradient(
        from 90deg,
        rgba(4, 193, 255, 1) 0%,
        transparent 90%
      );
      -webkit-mask: radial-gradient(
        closest-side circle,
        transparent 94%,
        red 95% 99%,
        transparent 100%
      );
      animation: rotate 10s linear infinite;
    }
    @keyframes rotate {
      from {
        transform: rotate(360deg);
      }
      to {
        transform: rotate(0deg);
      }
    }
  }
}

::v-deep.table_scroll ._table_header_hide td.el-table__cell .cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
</style>
